<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="../../cdn/vue/vue.global.min.js"></script>
  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
  <script src="../../cdn/element-plus/index.full.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    {{obj}}
    <avue-form :option="option" v-model="obj" @submit="submit">
      <template #name="scope">
        <avue-input :disabled="scope.disabled" :label="scope.column.label" v-model="obj.name"></avue-input>
      </template>
      <template #test="scope">
        <el-tag>测试自定义内容</el-tag>
      </template>
      <template #cascader-type="{node,data}">
        <span>{{ data.label }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
      <template #tree-type="{ item }">
        <span class="el-tree-node__label">
          <el-icon>
            <el-icon-user />
          </el-icon>
          {{ item.label }}
        </span>
      </template>
    </avue-form>
  </div>
</body>
<script>
  let baseUrl = 'https://cli.avuejs.com/api/area'
  let app = Vue.createApp({
    data() {
      return {
        obj: {
          name: 'small',
          checkbox: ["120000", "110000", "130000"]
        },
        option: {
          card: false,
          printBtn: true,
          labelWidth: 110,
          column: [{
            label: '自定义测试',
            prop: 'test',
          },
          {
            label: '姓名',
            prop: 'name',
            formslot: true,
            order: 3
          },
          {
            label: '级别',
            prop: 'cascader',
            type: 'cascader',
            // multiple: true,
            // filterable: true,
            // checkStrictly: true,
            order: 4,
            dicData: [{
              label: '一级',
              value: 3,
              children: [
                {
                  label: '一级1',
                  value: 1,
                }, {
                  label: '一级2',
                  value: 2,
                }
              ]
            }],
          },
          {
            label: '树型',
            prop: 'tree',
            type: 'tree',
            multiple: true,
            typeslot: true,
            checked: (data) => {
              console.log(data)
            },
            nodeClick: (data) => {
              console.log(data)
            },
            dicData: [{
              label: '测试1',
              value: 0,
              children: [{
                label: '测试0',
                value: 2
              }]
            }, {
              label: '测试2',
              value: 1
            }]
          },
          {
            width: 120,
            label: '开关',
            prop: 'switch',
            type: 'switch',
            dicData: [
              {
                label: '关闭',
                value: 0
              },
              {
                label: '开启',
                value: 1
              }
            ]
          },
          {
            label: '默认值',
            prop: 'default1',
            value: '22',
            rules: [
              {
                required: true,
                message: '请输入数字',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '多选',
            prop: 'selects',
            multiple: true,
            type: 'select',
            dataType: 'number',
            dicData: [{
              label: '选项1',
              value: 0
            }, {
              label: '选项2',
              value: 1
            }]
          },
          {
            label: '数字',
            prop: 'number',
            type: 'number',
            step: 10,
            rules: [
              {
                required: true,
                type: 'number',
                message: '请输入数字'
              }
            ]
          },
          {
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['city'],
            dicUrl: `${baseUrl}/getProvince`,
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '城市',
            prop: 'city',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            row: true,
            cascader: ['area'],
            dicUrl: `${baseUrl}/getCity/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择城市',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '地区',
            prop: 'area',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getArea/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择地区',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '多选',
            prop: 'checkbox',
            type: 'checkbox',
            max: 5,
            min: 2,
            props: {
              label: 'name',
              value: 'code'
            },
            span: 24,
            rules: [
              {
                type: 'array',
                required: true,
                message: '请输入数字'
              }
            ],
            dicUrl: `${baseUrl}/getProvince`
          },
          {
            label: '图标选择器',
            prop: 'icon',
            type: 'icon',
            iconList: [{
              label: '基本图标',
              list: ['el-icon-info', 'el-icon-error', 'el-icon-error', 'el-icon-success', 'el-icon-warning', 'el-icon-question']
            }, {
              label: '方向图标',
              list: ['el-icon-back', 'el-icon-arrow-left', 'el-icon-arrow-down', 'el-icon-arrow-right', 'el-icon-arrow-up']
            }, {
              label: '符号图标',
              list: ['el-icon-plus', 'el-icon-minus', 'el-icon-close', 'el-icon-check']
            }]
          }
          ]
        }
      }
    },
    mounted() {
      this.obj = {
        switch: 1,
        selects: '0,1',
        name: 'small',
        cascader: [3, 1],
        default: 10,
        tree: [2],
        province: '220000',
        city: '220700',
        area: '220702',
        icon: 'el-icon-error',
      }
    },
    methods: {
      submit(form, done) {
        this.$message.success('3s后关闭');
        setTimeout(() => {
          done()
        }, 3000)
      }
    }
  })
  app.use(ElementPlus)
  app.use(AVUE)
  app.mount('#app')
</script>

</html>